<template>
	<view>
		<u-keyboard zIndex='999999' ref="uKeyboard" mode="number" :safe-area-inset-bottom="true" :tooltip="false"
			@change="valChange" @backspace="backspace" :show='showKeyboard' @close="close" dotDisabled>
			<view class="flex_center u-bg-white u-p-t-40">
				<u-code-input :maxlength="6" v-model="paymentPassword" dot></u-code-input>
			</view>
		</u-keyboard>
	</view>
</template>

<script setup>
	import {
		watch,
		ref,
		reactive,
		defineEmits
	} from 'vue';
	import Md5 from 'js-md5'
	let emits = defineEmits(['sendPass'])
	const showKeyboard = ref(false);
	const paymentPassword = ref('');

	const changePayWay = (payWay) => {
		checkWay.value = payWay;
	};
	const valChange = ((e) => {
		if (paymentPassword.value.length <= 5) {
			paymentPassword.value += e
		}
		if (paymentPassword.value.length == 6) {
			// let obj = JSON.parse(JSON.stringify(paymentPassword.value))
			// obj = Md5(obj)
			emits('sendPass', paymentPassword.value)
		}
	})
	const backspace = ((e) => {
		if (paymentPassword.value.length) paymentPassword.value = paymentPassword.value.substr(0, paymentPassword
			.value.length - 1);
	})
	/**
	 * 确认支付
	 */
	const confirmPay = () => {
		showKeyboard.value = true

	};
	const close = () => {
		showKeyboard.value = false
		paymentPassword.value = ''

	};
	watch(showKeyboard, (n, o) => {
		paymentPassword.value = ''
	}, {
		immediate: true,
	})
	defineExpose({
		showKeyboard
	})
</script>

<style>
	.flex_center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.u-bg-white {
		background-color: #fff;
	}

	.u-p-t-40 {
		padding: 40rpx 0;
	}

	::v-deep.u-code-input {
		padding: 0 32rpx;
		width: 100% !important;
		justify-content: space-between !important;
	}
</style>